<template>
<!-- 课堂路由 -->
  <div class="FoodBuy">
    <van-nav-bar
      left-text="采购清单"
      right-text="清空"
      @click-right="onClickRight"
      :fixed="true"
      :placeholder="true"
      z-index="100"
      
    />
    <van-tabs v-model="active" animated :border="true" color="orange" :sticky="true"
      offset-top="60">
      <van-tab title="按菜谱">
        <div v-for="(item,index) in lanzi" :key="index" class="cailan">

          <van-swipe-cell :stop-propagation="true">
            <div class="imgBox">
              <van-image :src="item.photo_path" @click="$router.push({ path: '/menuDetail', query: { id: item.cook_id }})"/>
              <span>{{item.title}}</span>
            </div>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" @click="delete_cai(index)"/>
          </template>
        </van-swipe-cell>

          <van-row v-for="(i,a) in item.major" :key="a" @click="hasDo(index,a)">
            <van-col span="12" :class="{text:i.isDone }">{{i.title}}</van-col>
            <van-col span="12" :class="{text:i.isDone }">{{i.note}}</van-col>
          </van-row>
        </div>
      </van-tab>
      <van-tab title="全部">
         <div v-for="(item,index) in lanzi" :key="index" class="cailan">
          <van-row v-for="(i,a) in item.major" :key="a" @click="hasDo(index,a)">
            <van-col span="12" :class="{text:i.isDone }">{{i.title}}</van-col>
            <van-col span="12" :class="{text:i.isDone }">{{i.note}}</van-col>
          </van-row>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>


<script>
import { mapState,mapMutations } from 'vuex'
export default {
  props:["path"],
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    ...mapState(['lanzi'])
  },
  methods: {
    onClickRight() {
      this.lanziQingKong();
    },
    delete_cai(index){
      this.lanziReduce({index:index })
    },
    ...mapMutations(["lanziReduce","lanziCaiDo","lanziQingKong"]),
    hasDo(index,a){
      // console.log(index,a);
      this.lanziCaiDo({index:index,a:a});
    }
  },
}
</script>

<style lang="less">

.FoodBuy{
  .cailan{
    padding: 0 15px;
    .text{
      text-decoration: line-through;
      color: rgb(145, 139, 139);
    }
     .delete-button {
        height: 100%;
      }
    .van-row{
       height: 40px;
      line-height: 40px;
      border-bottom:1px dashed rgb(187, 184, 184)
    }
    .imgBox{
      height: 100px;
      overflow: hidden;
      display: flex;
      align-items: center;
      position: relative;
      background: #d7cfcf9e;
      border-radius: 5px;
      .van-image{
        width: 100%;
      }
      span{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: white;
      }
    }
  }
  .van-nav-bar .van-icon{
    color: black;
    font-size: 20px;
  }
  /* .van-nav-bar__title{
    // margin-left: 70px;
  } */
  .van-nav-bar__content{
    height: 60px;
    .van-nav-bar__left{
      font-size: 18px;
      .van-nav-bar__text{
        color: black;
      }
    }
  }
  .van-tab__pane{
    margin-bottom: 60px;
  }
}
</style>